<template>
    <div class='header'>
        <div class='add-wea'>
            <div class='add' @click='showSlePos'>
                <span class='fa fa-map-marker add-icon'></span>
                <div class='add-content'><span> &nbsp;{{address}}</span></div>&nbsp;
                <span class='fa fa-sort-down add-icon'></span>
            </div>
            <div class='wea'>
                <div>
                    <p>{{weather.temperature|tempFormat}}</p>
                    <span>{{weather.description}}</span>
                </div>
                <img :src="weather.image_hash|imgFormat" class='img'>
            </div>
        </div>
        <a href="" >
            <input type="text" placeholder='搜索商家、商品' class='search-frame'>
        </a>
        
        <div class="hot-search-content">
            <span v-for='item in hotSearchGoods'>{{item.word}}</span>
        </div>
    </div>
</template>
<script>
    export default{
        props:['address','weather','hotSearchGoods'],
        methods:{
            showSlePos:function(){
                this.$emit('showSlePos')
            }
        }
    }
</script>
<style scoped>
    .header{
        padding: 1rem;
        background-color: #0096FF;
        color:#fff;
    }
    /*地址-天气*/
    .add-wea{
        display: flex;
        justify-content: space-between;
        height: 3rem;
        line-height: 3rem;
    }
    .add{
        width:60%;
        display: flex;
        font-size: 1.8rem;
    }
    .add .add-icon{
        line-height: 3rem;
    }
    .add .add-content{
        height: 3rem;
        width: 17.6rem;
        white-space: nowrap;
        overflow: hidden;
    }
    .wea{
        display: flex;
        justify-content: space-between;
    }
    .wea div{
        width: 2.5rem;
        height: 3rem;
        line-height: 2rem;
        display: block;
    }
    .wea div p{
        width: 1.2rem;
        height: 1rem;
    }
    .wea .img{
        width: 2.3rem;
        height: 2.3rem;
        line-height: 3rem;
    }
    /*搜索框*/
    .search-frame{
        width: 100%;
        height: 3rem;
        margin: 0.5rem 0;
        border-radius: 3.5rem;
        border: 1px solid transparent;
        box-shadow: 0 0.026667rem 0.066667rem 0 rgba(0,0,0,.2);
        color: #333;
        text-align: center;
    }
    /*滚动菜单*/
    .hot-search-content{
        width: 100%;
        overflow: scroll;
        margin-top: 0.5rem;
        scroll-snap-type: inherit;
    }
    .hot-search-content span{
        margin-right: 2rem;
        white-space: nowrap;
    }
</style>